<template>
  <div id="app">
    <!-- 顶部菜单 -->
    <header ref="header" class="header">
      <div class="menu">
        <img alt="" src="@/assets/image/社区互动.png"/>
        <div>
          <!--          <router-link to="/">非遗展示中心</router-link>-->
          <!--          <router-link to="/ProjectDetail">项目详情工坊</router-link>-->
          <router-link to="/CultureCommunity">文化社区</router-link>
          <router-link to="/CultureMap">文化地图导航</router-link>
          <router-link to="/CultureDeclare">非遗申报</router-link>
          <router-link to="/AiTool">AI工具</router-link>
          <router-link to="/Shop">周边商城</router-link>
          <a target="_blank" href="http://139.196.196.178:83">后台管理</a>
        </div>
      </div>
      <div class="user-profile">
        <div v-if="userInfo" class="dropdown">
          <el-dropdown placement="bottom">
            <div class="img">
              <el-image :src="userInfo.imageUrl || avatar"
                        alt="img" style="height: 50px;border-radius: 50%"/>
              <div style="text-align:center;color: white;font-size: 15px">{{ userInfo.username || '游客' }}</div>
            </div>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link style="text-decoration: none;color: black" to="/CenterView">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else>
          <router-link style="text-decoration: none;color: black" to="/Login">
            <el-button class="el-icon-user">
              用户登录
            </el-button>
          </router-link>
          <router-link style="margin-left: 10px;text-decoration: none;color: black" to="/Register">
            <el-button class="el-icon-s-shop">
              用户注册
            </el-button>
          </router-link>
        </div>
      </div>
    </header>
    <router-view/>
    <!--  底部菜单  -->
    <!--  底部菜单  -->
    <div class="main-content-footer">
      <div style="line-height: 50px">
        <div style="font-size: 30px;font-weight: 600;">
          文化社区
        </div>
        <div>
          电话:19976898057
        </div>
        <div>
          邮箱:208550738@qq.com
        </div>
        <div>
          地址:中国湖南张家界市武陵山大道学院路1号
        </div>
        <div>
          <a style="color: white;text-decoration: none" href="http://beian.miit.gov.cn/" target="_blank"
             rel="noopener noreferrer">
            湘ICP备2024092350号-2
          </a>
        </div>
      </div>
      <div>
        <img alt="wechat" src="@/assets/image/wechat.png" style="width: 200px;height: 200px">
      </div>
    </div>

    <!-- 电梯导航 -->
    <div class="elevator-nav">
      <ul>
        <!--        <li>-->
        <!--          <router-link class="home" to="/">-->
        <!--            <img alt="" src="@/assets/image/数据展示.png">-->
        <!--            <p>非遗展示中心</p>-->
        <!--          </router-link>-->
        <!--        </li>-->
        <!--        <li>-->
        <!--          <router-link to="/ProjectDetail">-->
        <!--            <img alt="" src="@/assets/image/详情.png">-->
        <!--            <p>项目详情工坊</p>-->
        <!--          </router-link>-->
        <!--        </li>-->
        <li>
          <router-link to="/CultureCommunity">
            <img alt="" src="@/assets/image/社区互动.png">
            <p>文化社区</p>
          </router-link>
        </li>
        <li>
          <router-link to="/CultureMap">
            <img alt="" src="@/assets/image/地图.png">
            <p>文化地图导航</p>
          </router-link>
        </li>
        <li>
          <router-link to="/CultureDeclare">
            <img alt="" src="@/assets/image/申报记录.png">
            <p>非遗申报</p>
          </router-link>
        </li>
        <li>
          <router-link to="/AiTool">
            <img alt="" src="@/assets/image/工具.png">
            <p>AI工具</p>
          </router-link>
        </li>
        <li>
          <router-link to="/Shop">
            <img alt="" src="@/assets/image/直播间偏好设置.png">
            <p>周边商城</p>
          </router-link>
        </li>

        <li>
          <a href="#" @click.prevent="scrollToTop">
            <img alt="返回顶部" src="@/assets/image/返回顶部.png">
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      userInfo: {},
      avatar: require('@/assets/image/no_image.png'),
    }
  },
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0
      });
    },
    handleScroll() {
      const header = this.$refs.header;
      if (!header) return;

      const currentScrollPosition = window.scrollY || document.documentElement.scrollTop;
      if (currentScrollPosition >= 100) {
        header.style.top = '-10%';
      } else {
        header.style.top = '0%';
      }
    },
    logout() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('xm-user')
        window.location.reload(true);
      }).catch(() => {
      });
    },
    handleClick() {
      // 缓存查询结果，避免重复查询 DOM
      const menuItems = document.querySelectorAll('.menu a');

      // 检查是否有菜单项，避免空操作
      if (menuItems.length === 0) {
        console.warn('未找到 .menu a 元素');
      } else {
        // 使用事件委托机制，减少事件监听器数量
        document.querySelector('.menu').addEventListener('click', (e) => {
          if (e.target.tagName === 'A') { // 确保点击的是 <a> 标签
            // 将所有菜单项的颜色重置为 #fff
            menuItems.forEach(item => {
              item.style.color = '#fff';
            });

            // 设置当前点击项的颜色为 #007bff
            e.target.style.color = '#007bff';
          }
        });
      }
    }
  },
  mounted() {
    this.$notify({
      title: '使用提示',
      message: '<div class="notification-box" style="padding: 8px; text-align: left">\n' +
          '    <h4 style="margin-bottom: 12px">📢 温馨提示：</h4>\n' +
          '    <div style="margin-bottom: 8px">\n' +
          '        <strong>社区非遗信息说明：</strong>\n' +
          '        <ul style="list-style: disc; padding-left: 20px; margin: 8px 0">\n' +
          '            <li>本平台信息基于用户申报资料整理</li>\n' +
          '            <li><strong>不作为政府正式申报依据</strong></li>\n' +
          '        </ul>\n' +
          '    </div>\n' +
          '    <div>\n' +
          '        <strong>后续流程：</strong>\n' +
          '        <p style="margin: 8px 0">您的资料通过初审后，我们将主动联系您完善正式申报手续。</p>\n' +
          '        <em style="color: #666; display: block; margin-top: 8px">感谢您的参与！</em>\n' +
          '    </div>\n' +
          '</div>',
      duration: 0,
      offset: 100,
      dangerouslyUseHTMLString: true
    });
    this.userInfo = JSON.parse(localStorage.getItem('xm-user'))
    window.addEventListener('scroll', this.handleScroll);
    this.handleClick()
  },
  beforeDestroy() {
    // 移除滚动事件监听器，防止内存泄漏
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>
<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px;
  background-color: rgb(155, 59, 59, .8); /* 深棕色 */
  background-size: cover;
  transition: all .5s;
  z-index: 999;

  .logo {
    font-size: 24px;
    font-weight: bold;
  }

  .menu {
    display: flex;
    align-items: center;

    a {
      margin: 0 15px;
      text-decoration: none;
      color: #fff;
      transition: all .5s;
      font-size: 20px;
      font-weight: bold; /* 加粗 */
      font-weight: bold;

      &:hover {
        color: #007bff;
        color: #ffcc00;
      }
    }
  }
}

.main-content-footer {
  background-color: #404040;
  background-size: cover;
  display: flex;
  justify-content: space-around;
  color: white;
  padding: 30px 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
}

.elevator-nav {
  position: fixed;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  transition: all .5s;
  font-size: 15px;
  font-weight: bold; /* 加粗 */
  font-style: italic; /* 斜体 */
  font-weight: bold;
  font-style: italic;
  text-align: center;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px 0 0 10px;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);

  a {
    text-decoration: none;
    color: black;
  }

  p {
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    width: 25px;
    height: 25px;
  }
}

.elevator-nav:hover {
  right: 0;
}

.elevator-nav li {
  padding: 5px;
  background-color: white;
  margin: 5px;
  border-radius: 5px;
  transition: all .5s;
  box-shadow: 2px 2px 15px 0 #d5dceb;
  cursor: pointer;
  width: 50px;
}

.elevator-nav li:hover {
  transform: translateX(-10px);
  background-color: #ffcc00;
}
</style>

